<template>
  <div class="container">
    <Aside></Aside>
    <div class="main-box">
      <Header></Header>
      <div class="table-box">
        <el-button @click="addFieldBtn">添加信息项</el-button
        ><span style="margin-right: 10px"></span>
        <el-select v-model="nowSelect" placeholder="请选择">
          <el-option
            v-for="(item, key) in tableData"
            :key="key"
            :label="item.name"
            :value="key"
          >
          </el-option>
        </el-select>
        <el-table :data="fieldData" stripe style="width: 100%">
          <el-table-column
            prop="name"
            label="信息项名称"
            width="180"
          ></el-table-column>
          <el-table-column label="数据类型" prop="type">
          </el-table-column>
          <el-table-column label="设为查询条件">
            <template slot-scope="scope">
              {{ Istrue(scope.row.is_search) }}
            </template>
          </el-table-column>
          <el-table-column label="设为查询必填">
            <template slot-scope="scope">
              {{ Istrue(scope.row.must_search) }}
            </template>
          </el-table-column>
          <el-table-column label="设为查询展示">
            <template slot-scope="scope">
              {{ Istrue(scope.row.show_search) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="index"
            label="排序"
            width="180"
          ></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                icon="el-icon-edit"
                @click="handleUpdate(fieldData[scope.$index])"
                >修改
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handledelete(scope.$index)"
                icon="el-icon-delete"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog :title="digTtitle" :visible.sync="IsUpdate">
          <el-form :data="EditForm" label-width="110px">
            <el-form-item label="字段名称">
              <el-input v-model="EditForm.name"></el-input>
            </el-form-item>
            <el-form-item label="数据类型">
              <el-radio-group v-model="EditForm.type">
                <el-radio label="文本"></el-radio>
                <el-radio label="图片"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="设为查询条件">
              <el-radio-group v-model="EditForm.is_search">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="设为必填条件">
              <el-radio-group v-model="EditForm.must_search">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="设为查询展示">
              <el-radio-group v-model="EditForm.show_search">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-model="EditForm.index"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                @click="addField"
                v-show="digTtitle == '添加信息'"
                type="primary"
                >保存添加</el-button
              >
              <el-button
                @click="updateField"
                v-show="digTtitle == '修改信息'"
                type="primary"
                >保存修改</el-button
              >
              <el-button @click="IsUpdate = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../components/header.vue";
import Aside from "../components/aside.vue";
export default {
  name: "Label",
  data() {
    return {
      nowSelect: 0,
      tableData: [], //表数组
      fieldData: [],
      IsUpdate: false,
      EditForm: {
        id: null,
        name: "",
        type:'',
        is_search: 1,
        must_search: 0,
        show_search: 1,
        index: 1,
      },
      EditSelect: "开启",
      digTtitle: "添加信息",
    };
  },
  components: {
    Aside,
    Header,
  },
  methods: {
    Istrue(val) {
      return val ? "√" : "×";
    },
    addFieldBtn() {
      //添加窗口
      this.IsUpdate = true;
      this.digTtitle = "添加信息";
    },
    addField() {
      //增加保存
      let tableId = this.tableData[this.nowSelect].id;
      this.$api
        .addField(
          tableId,
          this.EditForm.name,
          this.EditForm.index,
          this.EditForm.is_search,
          this.EditForm.must_search,
          this.EditForm.show_search
        )
        .then((res) => {
          if (res.code === 0) {
            this.$api.getField(tableId).then((res) => {
              this.fieldData = res.result;
            });
            this.$message.success(res.message);
            this.IsUpdate = false;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    handledelete(index) {
      //删除
      this.$confirm("此操作将永久删除该记录, 是否继续?", "删除确认", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(() => {
          this.$api.deleteField([this.fieldData[index].id]).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.fieldData.splice(index, 1);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleUpdate(data) {
      this.digTtitle = "修改信息";
      this.EditForm = data;
      this.IsUpdate = true;
    },
    updateField() {
      const { id, name,type,index, is_search, must_search, show_search } =
        this.EditForm;
      this.$api
        .updateField(id, name,type,index, is_search, must_search, show_search)
        .then((res) => {
          if (res.code === 0) {
            this.$message.success(res.message);
            this.IsUpdate = false;
            this.$api.getTable().then((res) => {
              this.tableData = res.result.data;
              this.$api.getField(res.result.data[0].id).then((res) => {
                this.fieldData = res.result;
              });
            });
          }
        });
    },
  },
  mounted() {
    var that = this; //进入时查询一次
    that.$api.getTable().then((res) => {
      that.tableData = res.result.data;
      that.$api.getField(res.result.data[0].id).then((res) => {
        that.fieldData = res.result;
      });
    });
  },
  watch: {
    nowSelect(val) {
      var that = this;
      this.$api.getField(this.tableData[val].id).then((res) => {
        that.fieldData = res.result;
      });
    },
    IsUpdate(val) {
      if (!val) {
        this.EditForm = {
          name: "",
          is_search: 1,
          must_search: 0,
          show_search: 1,
          index: 1,
        };
      }
    },
  },
};
</script>
